<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
        padding: 80px 20px 20px 20px;
        background-color: #f8f9fa;
        display: flex;
      }
      .header {
        position: fixed;
        top: 0;
        right: 0;
        padding: 15px 30px;
        background: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 15px;
      }

      .header .text {
        margin: 0;
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }

      .header .welcome {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #666;
      }

      .header .welcome h4 {
        margin: 0;
        color: #007bff;
        font-weight: 600;
      }

      .header .picture {
        border-radius: 50%;
        border: 2px solid #007bff;
      }

      .header .out {
        color: #dc3545;
        text-decoration: none;
        font-weight: 500;
        padding: 5px 10px;
        border: 1px solid #dc3545;
        border-radius: 4px;
        transition: all 0.3s ease;
      }

      .header .out:hover {
        background-color: #dc3545;
        color: white;
        text-decoration: none;
      }

      button {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border: 2px solid #007bff;
        border-radius: 5px;
        margin-bottom: 20px;
        padding: 12px 24px;
        font-size: 15px;
        color: #007bff;
      }
      .student-table, .teacher-table, .course-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        overflow: hidden;
        margin-bottom: 30px;
      }
      .student-table tbody tr:nth-child(odd),
      .teacher-table tbody tr:nth-child(odd),
      .course-table tbody tr:nth-child(odd) {
        background-color: #f1f3f4;
      }
      .student-table tbody tr:nth-child(even),
      .teacher-table tbody tr:nth-child(even),
      .course-table tbody tr:nth-child(even) {
        background-color: #ffffff;
      }
      .student-table table,
      .teacher-table table,
      .course-table table {
        width: 100%;
        font-size: 18px;
      }
      .student-table th,
      .student-table td,
      .teacher-table th,
      .teacher-table td,
      .course-table th,
      .course-table td {
        padding: 20px 15px;
        font-size: 16px;
        font-weight: 500;
      }
      .left {
        width: 200px;
        background: white;
        flex-shrink: 0;
        height: 600px;
      }
      .secondary-nav h3 {
        background: #007bff;
        color: white;
        padding: 20px;
        margin: 0;
        font-size: 1.3em;
        font-weight: 500;
        text-align: center;
      }
      .secondary-nav ul {
        list-style: none;
        padding: 15px 0;
        margin: 0;
      }
      .secondary-nav li {
        padding: 15px 25px;
        font-size: 1em;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #555;
        border-left: 3px solid transparent;
      }
      .secondary-nav li:hover {
        background: #f8f9fa;
        color: #007bff;
        border-left-color: #007bff;
      }
      .secondary-nav li.active {
        background: #e3f2fd;
        color: #007bff;
        border-left-color: #007bff;
        font-weight: 500;
      }
      .main-content {
        flex: 1;
        background: white;
        padding: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
      .delete-btn {
        color: #007bff;
        background: transparent;
        border: 1px solid #007bff;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
      }
      .delete-btn:hover {
        color: white;
        background-color: #007bff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
      }
      .pagination-table {
        text-align: center;
        margin-top: 20px;
      }
      .pagination-table button {
        margin: 0 5px;
        padding: 8px 16px;
      }
      .pagination-table button.active {
        background: #007bff;
        color: white;
      }
      .pagination-table button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .table-content {
        display: none;
      }
      .table-content.active {
        display: block;
      }
      .page-row {
        display: none;
      }
      .page-row.active {
        display: table-row;
      }
    </style>
</head>
<body>
<div th:insert="header.html"></div>
<div class="left">
  <div th:insert="left.html"></div>
</div>
<div class="main-content">
  <div id="student-table" class="table-content active">
    <button onclick="openAddStudentForm()">新增学生</button>
    <div class="student-table">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>密码</th>
          <th>性别</th>
          <th>班级</th>
          <th>生日</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="student:${students}">
          <th><h4 th:text="${student.id}"></h4></th>
          <th><h4 th:text="${student.name}"></h4></th>
          <th><h4 th:text="${student.password}"></h4></th>
          <th><h4 th:text="${student.sex}"></h4></th>
          <th><h4 th:text="${student.clazz}"></h4></th>
          <th><h4 th:text="${student.birthday}"></h4></th>
          <td><button class="delete-btn" onclick="'deleteStudent('+${student.id}+'，\''+${student.name}+'\')'">删除</button></td>
        </tr>

<!--        <tr>-->
<!--          <td>104</td>-->
<!--          <td>李牧尘</td>-->
<!--          <td>1111</td>-->
<!--          <td>女</td>-->
<!--          <td>13软件1</td>-->
<!--          <td>1997-12-05</td>-->
<!--          <td><button class="delete-btn" onclick="deleteStudent(104, '李牧尘')">删除</button></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td>105</td>-->
<!--          <td>刘红枫</td>-->
<!--          <td>0000</td>-->
<!--          <td>男</td>-->
<!--          <td>13软件2</td>-->
<!--          <td>1995-11-15</td>-->
<!--          <td><button class="delete-btn" onclick="deleteStudent(105, '刘红枫')">删除</button></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td>106</td>-->
<!--          <td>昭</td>-->
<!--          <td>123</td>-->
<!--          <td>女</td>-->
<!--          <td></td>-->
<!--          <td></td>-->
<!--          <td><button class="delete-btn" onclick="deleteStudent(106, '昭')">删除</button></td>-->
<!--        </tr>-->
        </tbody>
      </table>
    </div>
    <div class="pagination-table" id="student-pagination">
      <div class="pagination-table">
        <div th:insert="footer.html"></div>
      </div>
    </div>
  </div>

  <div id="teacher-table" class="table-content">
    <button onclick="openAddTeacherForm()">新增教师</button>
    <div class="teacher-table">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>工号</th>
          <th>姓名</th>
          <th>职称</th>
          <th>所属学院</th>
          <th>联系电话</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>T001</td>
          <td>张老师</td>
          <td>教授</td>
          <td>计算机学院</td>
          <td>13800138001</td>
          <td><button class="delete-btn" onclick="deleteTeacher('T001', '张老师')">删除</button></td>
        </tr>
        <tr>
          <td>T002</td>
          <td>王老师</td>
          <td>副教授</td>
          <td>软件学院</td>
          <td>13800138002</td>
          <td><button class="delete-btn" onclick="deleteTeacher('T002', '王老师')">删除</button></td>
        </tr>
        <tr>
          <td>T003</td>
          <td>李老师</td>
          <td>讲师</td>
          <td>信息学院</td>
          <td>13800138003</td>
          <td><button class="delete-btn" onclick="deleteTeacher('T003', '李老师')">删除</button></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="pagination-table" id="teacher-pagination">
      <div class="pagination-table">
        <div th:insert="footer.html"></div>
      </div>
    </div>
  </div>

  <div id="course-table" class="table-content">
    <button onclick="openAddCourseForm()">新增课程</button>
    <div class="course-table">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>课程编号</th>
          <th>课程名称</th>
          <th>学分</th>
          <th>课时</th>
          <th>授课教师</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>C001</td>
          <td>Java程序设计</td>
          <td>4</td>
          <td>64</td>
          <td>张老师</td>
          <td><button class="delete-btn" onclick="deleteCourse('C001', 'Java程序设计')">删除</button></td>
        </tr>
        <tr>
          <td>C002</td>
          <td>数据库原理</td>
          <td>3</td>
          <td>48</td>
          <td>王老师</td>
          <td><button class="delete-btn" onclick="deleteCourse('C002', '数据库原理')">删除</button></td>
        </tr>
        <tr>
          <td>C003</td>
          <td>Web前端开发</td>
          <td>3</td>
          <td>48</td>
          <td>李老师</td>
          <td><button class="delete-btn" onclick="deleteCourse('C003', 'Web前端开发')">删除</button></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="pagination-table" id="course-pagination">
      <div class="pagination-table">
        <div th:insert="footer.html"></div>
      </div>
    </div>
  </div>
</div>

<script>
  // 分页配置
  const pageSize = 3; // 每页显示4条数据
  let currentPages = {
    student: 1,
    teacher: 1,
    course: 1
  };

  // 初始化数据
  // const studentData = [
  //   { id: 104, name: '李牧尘', password: '1111', gender: '女', class: '13软件1', birthday: '1997-12-05' },
  //   { id: 105, name: '刘红枫', password: '0000', gender: '男', class: '13软件2', birthday: '1995-11-15' },
  //   { id: 106, name: '昭', password: '123', gender: '女', class: '', birthday: '' },
  //   { id: 107, name: '张三', password: '456', gender: '男', class: '13软件3', birthday: '1996-03-20' },
  //   { id: 108, name: '李四', password: '789', gender: '女', class: '13软件1', birthday: '1997-08-15' },
  //   { id: 109, name: '王五', password: 'abc', gender: '男', class: '13软件2', birthday: '1996-11-30' },
  //   { id: 110, name: '赵六', password: '123456', gender: '男', class: '13软件4', birthday: '1996-12-25' }
  // ];

  const teacherData = [
    { id: 'T001', name: '张老师', title: '教授', department: '计算机学院', phone: '13800138001' },
    { id: 'T002', name: '王老师', title: '副教授', department: '软件学院', phone: '13800138002' },
    { id: 'T003', name: '李老师', title: '讲师', department: '信息学院', phone: '13800138003' },
    { id: 'T004', name: '赵老师', title: '教授', department: '计算机学院', phone: '13800138004' },
    { id: 'T005', name: '钱老师', title: '副教授', department: '软件学院', phone: '13800138005' }
  ];

  const courseData = [
    { id: 'C001', name: 'Java程序设计', credit: '4', hours: '64', teacher: '张老师' },
    { id: 'C002', name: '数据库原理', credit: '3', hours: '48', teacher: '王老师' },
    { id: 'C003', name: 'Web前端开发', credit: '3', hours: '48', teacher: '李老师' },
    { id: 'C004', name: '数据结构', credit: '4', hours: '64', teacher: '赵老师' },
    { id: 'C005', name: '操作系统', credit: '3', hours: '48', teacher: '钱老师' },
    { id: 'C006', name: '计算机网络', credit: '3', hours: '48', teacher: '张老师' },
    { id: 'C007', name: '软件工程', credit: '2', hours: '32', teacher: '王老师' }
  ];

  // 初始化页面
  document.addEventListener('DOMContentLoaded', function() {
    console.log("页面加载完成，开始初始化数据");
    loadRegisteredStudents();
    // renderTable('student', studentData);
    renderTable('teacher', teacherData);
    renderTable('course', courseData);
  });
  // function loadRegisteredStudents() {
  //   console.log("开始加载学生数据");
  //   console.log("从localStorage加载学生数据");
  //   const registeredStudents = JSON.parse(localStorage.getItem('registeredStudents') || '[]');
  //   console.log("localStorage中的学生:", registeredStudents);

  //   registeredStudents.forEach((student, index) => {
  //     // 检查是否已存在
  //     const existingStudent = studentData.find(s => s.name === student.username);
  //     if (!existingStudent) {
  //       const newId = 110 + studentData.length + 1;
  //       studentData.push({
  //         id: newId,
  //         name: student.username,
  //         password: student.password || '未设置',
  //         gender: student.gender || '未知',
  //         class: student.clazz || '未设置',
  //         birthday: ''
  //       });
  //     }
  //   });
  // }

  // 渲染表格和分页
  function renderTable(type, data) {
    if (type === 'student'){
      return;
    }
    const tbody = document.querySelector(`#${type}-table tbody`);
    const pagination = document.getElementById(`${type}-pagination`);
    const currentPage = currentPages[type];
    const totalPages = Math.ceil(data.length / pageSize);

    // 清空表格
    tbody.innerHTML = '';

    // 渲染当前页数据
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const currentData = data.slice(startIndex, endIndex);

    currentData.forEach(item => {
      const row = document.createElement('tr');
      // if (type === 'student') {
      //   row.innerHTML = `
      //     <td>${item.id}</td>
      //     <td>${item.name}</td>
      //     <td>${item.password}</td>
      //     <td>${item.gender}</td>
      //     <td>${item.class}</td>
      //     <td>${item.birthday}</td>
      //     <td><button class="delete-btn" onclick="deleteStudent(${item.id}, '${item.name}')">删除</button></td>
      //   `;
      if (type === 'teacher') {
        row.innerHTML = `
          <td>${item.id}</td>
          <td>${item.name}</td>
          <td>${item.title}</td>
          <td>${item.department}</td>
          <td>${item.phone}</td>
          <td><button class="delete-btn" onclick="deleteTeacher('${item.id}', '${item.name}')">删除</button></td>
        `;
      } else if (type === 'course') {
        row.innerHTML = `
          <td>${item.id}</td>
          <td>${item.name}</td>
          <td>${item.credit}</td>
          <td>${item.hours}</td>
          <td>${item.teacher}</td>
          <td><button class="delete-btn" onclick="deleteCourse('${item.id}', '${item.name}')">删除</button></td>
        `;
      }
      tbody.appendChild(row);
    });

    // 渲染分页按钮
    renderPagination(pagination, type, currentPage, totalPages);
  }

  // 渲染分页按钮
  function renderPagination(pagination, type, currentPage, totalPages) {
    pagination.innerHTML = '';

    // 上一页按钮
    const prevButton = document.createElement('button');
    prevButton.textContent = 'Previous';
    prevButton.disabled = currentPage === 1;
    prevButton.onclick = () => changePage(type, currentPage - 1);
    pagination.appendChild(prevButton);

    // 页码按钮
    for (let i = 1; i <= totalPages; i++) {
      const pageButton = document.createElement('button');
      pageButton.textContent = i;
      pageButton.classList.toggle('active', i === currentPage);
      pageButton.onclick = () => changePage(type, i);
      pagination.appendChild(pageButton);
    }

    // 下一页按钮
    const nextButton = document.createElement('button');
    nextButton.textContent = 'Next';
    nextButton.disabled = currentPage === totalPages;
    nextButton.onclick = () => changePage(type, currentPage + 1);
    pagination.appendChild(nextButton);
  }

  // 切换页面
  function changePage(type, page) {
    currentPages[type] = page;
    const data = getDataByType(type);
    renderTable(type, data);
  }

  // 根据类型获取数据
  function getDataByType(type) {
    switch(type) {
      case 'student': return studentData;
      case 'teacher': return teacherData;
      case 'course': return courseData;
      default: return [];
    }
  }

  // 表格切换功能
  function showTable(tableType) {
    // 隐藏所有表格
    document.querySelectorAll('.table-content').forEach(table => {
      table.classList.remove('active');
    });

    // 显示选中的表格
    document.getElementById(tableType + '-table').classList.add('active');

    // 更新左侧栏激活状态
    document.querySelectorAll('.secondary-nav li').forEach(li => {
      li.classList.remove('active');
    });
    event.target.classList.add('active');
  }
  // 删除学生功能
  function deleteStudent(studentId, studentName) {
    if (confirm(`确定要删除学生 "${studentName}" (ID: ${studentId}) 吗？`)) {
      // 从数据数组中删除
      const index = studentData.findIndex(student => student.id === studentId);
      if (index !== -1) {
        studentData.splice(index, 1);
      }

      // 重新渲染表格
      renderTable('student', studentData);
      alert(`学生 "${studentName}" 删除成功！`);
    }
  }
  // 删除教师功能
  function deleteTeacher(teacherId, teacherName) {
    if (confirm(`确定要删除教师 "${teacherName}" (工号: ${teacherId}) 吗？`)) {
      const rows = document.querySelectorAll('.teacher-table tbody tr');
      rows.forEach(row => {
        const idCell = row.cells[0];
        if (idCell && idCell.textContent == teacherId) {
          row.style.transition = 'all 0.3s ease';
          row.style.opacity = '0';
          row.style.transform = 'translateX(100px)';

          setTimeout(() => {
            row.remove();
            alert(`教师 "${teacherName}" 删除成功！`);
          }, 300);
        }
      });
    }
  }
  // 删除课程功能
  function deleteCourse(courseId, courseName) {
    if (confirm(`确定要删除课程 "${courseName}" (编号: ${courseId}) 吗？`)) {
      const rows = document.querySelectorAll('.course-table tbody tr');
      rows.forEach(row => {
        const idCell = row.cells[0];
        if (idCell && idCell.textContent == courseId) {
          row.style.transition = 'all 0.3s ease';
          row.style.opacity = '0';
          row.style.transform = 'translateX(100px)';

          setTimeout(() => {
            row.remove();
            alert(`课程 "${courseName}" 删除成功！`);
          }, 300);
        }
      });
    }
  }

  // 新增学生功能
  function openAddStudentForm() {
    // 获取当前最大的ID，用于生成新ID
    const rows = document.querySelectorAll('.student-table tbody tr');
    let maxId = 106; // 默认从106开始
    if (rows.length > 0) {
      const lastRow = rows[rows.length - 1];
      const lastId = parseInt(lastRow.cells[0].textContent);
      maxId = Math.max(maxId, lastId);
    }
    // 弹出表单收集学生信息
    const name = prompt('请输入学生姓名:');
    if (!name) return; // 用户取消输入
    const password = prompt('请输入密码:');
    if (!password) return;
    const gender = prompt('请输入性别 (男/女):');
    if (!gender) return;
    const className = prompt('请输入班级 (可选):') || '';
    const birthday = prompt('请输入生日 (格式: YYYY-MM-DD, 可选):') || '';
    // 生成新ID
    const newId = maxId + 1;
    // 创建新行
    const tbody = document.querySelector('.student-table tbody');
    const newRow = document.createElement('tr');
    // 设置行内容
    newRow.innerHTML = `
      <td>${newId}</td>
      <td>${name}</td>
      <td>${password}</td>
      <td>${gender}</td>
      <td>${className}</td>
      <td>${birthday}</td>
      <td><button class="delete-btn" onclick="deleteStudent(${newId}, '${name}')">删除</button></td>
    `;

    // 添加到表格
    tbody.appendChild(newRow);
    // 添加动画效果
    newRow.style.opacity = '0';
    newRow.style.transform = 'translateX(-100px)';
    setTimeout(() => {
      newRow.style.transition = 'all 0.3s ease';
      newRow.style.opacity = '1';
      newRow.style.transform = 'translateX(0)';
    }, 10);
    alert(`学生 "${name}" 添加成功！`);
  }
  // 新增教师功能
  function openAddTeacherForm() {
    const name = prompt('请输入教师姓名:');
    if (!name) return;
    const title = prompt('请输入职称:');
    if (!title) return;
    const department = prompt('请输入所属学院:');
    if (!department) return;
    const phone = prompt('请输入联系电话:') || '';
    const rows = document.querySelectorAll('.teacher-table tbody tr');
    let maxId = 3;
    if (rows.length > 0) {
      const lastRow = rows[rows.length - 1];
      const lastId = parseInt(lastRow.cells[0].textContent.replace('T', ''));
      maxId = Math.max(maxId, lastId);
    }

    const newId = 'T' + (maxId + 1).toString().padStart(3, '0');
    const tbody = document.querySelector('.teacher-table tbody');
    const newRow = document.createElement('tr');

    newRow.innerHTML = `
      <td>${newId}</td>
      <td>${name}</td>
      <td>${title}</td>
      <td>${department}</td>
      <td>${phone}</td>
      <td><button class="delete-btn" onclick="deleteTeacher('${newId}', '${name}')">删除</button></td>
    `;

    tbody.appendChild(newRow);
    newRow.style.opacity = '0';
    newRow.style.transform = 'translateX(-100px)';

    setTimeout(() => {
      newRow.style.transition = 'all 0.3s ease';
      newRow.style.opacity = '1';
      newRow.style.transform = 'translateX(0)';
    }, 10);
    alert(`教师 "${name}" 添加成功！`);
  }
  // 新增课程功能
  function openAddCourseForm() {
    const name = prompt('请输入课程名称:');
    if (!name) return;
    const credit = prompt('请输入学分:');
    if (!credit) return;
    const hours = prompt('请输入课时:');
    if (!hours) return;
    const teacher = prompt('请输入授课教师:') || '';
    const rows = document.querySelectorAll('.course-table tbody tr');
    let maxId = 3;
    if (rows.length > 0) {
      const lastRow = rows[rows.length - 1];
      const lastId = parseInt(lastRow.cells[0].textContent.replace('C', ''));
      maxId = Math.max(maxId, lastId);
    }

    const newId = 'C' + (maxId + 1).toString().padStart(3, '0');
    const tbody = document.querySelector('.course-table tbody');
    const newRow = document.createElement('tr');

    newRow.innerHTML = `
      <td>${newId}</td>
      <td>${name}</td>
      <td>${credit}</td>
      <td>${hours}</td>
      <td>${teacher}</td>
      <td><button class="delete-btn" onclick="deleteCourse('${newId}', '${name}')">删除</button></td>
    `;

    tbody.appendChild(newRow);
    newRow.style.opacity = '0';
    newRow.style.transform = 'translateX(-100px)';

    setTimeout(() => {
      newRow.style.transition = 'all 0.3s ease';
      newRow.style.opacity = '1';
      newRow.style.transform = 'translateX(0)';
    }, 10);
    alert(`课程 "${name}" 添加成功！`);
  }
</script>
</body>
</html>